<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            font-size: 12px;
        }
        a{
            color: black;
        }
        .box{

            width: 600px;
            margin:0px auto;
            border: 1px dashed black;
        }
        table{
            width: 400px;height: 200px;
            margin: auto;
            font-size: 20px;
            text-align: left;
        }
        button{
            width: 100px;
            height: 30px;

        }
        hr{
            width: 90%;
            margin: auto;
        }
        .se1 {
            width: 90%;
            margin-top: 20px;
        }
        .se1 ul{
            margin-left: 40px;
            list-style: square;
        }
        .se1 li{
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="box">
    <table>
        <tr>
            <td>新闻标题：</td>
            <td><input type="text" id="biao"></td>
        </tr>
        <tr>
            <td>新闻地址：</td>
            <td><input type="text" id="dizhi"></td>
        </tr>
        <tr>
            <td>新闻类别：</td>
            <td><select id="lei">
                <option value="[科技]" name="科技">科技</option>
                <option value="[娱乐]" name="娱乐">娱乐</option>
                <option value="[财经]" name="财经">财经</option>
            </select></td>
        </tr>
        <tr>
            <td>是否标红：</td>
            <td><input type="radio" name="a">是 <input type="radio" name="a">否</td>
        </tr>
        <tr>
            <td colspan="2"><button id="btn">提交</button></td>
        </tr>
    </table>
    <hr>
    <section class="se1">
        <ul id="cha">

        </ul>
    </section>
</div>


</body>
<script src="jquery-3.2.1.min.js"></script>
<script src="baiduTemplate.js"></script>
            <!--百度模板-->
<script type="text/html" id="ty">

         <%for(var i=0;i< (qq.length >8?8:qq.length);i++){%>
         <li>
             <p><span ><%=qq[i].lei%></span><a href="#"><%=qq[i].biao%></a></p>
             <p><%=qq[i].time%></p>
         </li>

         <%}%>
</script>
       <script type="text/javascript">
           //点击事件
           btn.onclick = function(){
               //提交数据
               $.ajax({
                   url:"http://localhost:6500/jieshou",
                   type:"post",
                   data:JSON.stringify({
                       biao:biao.value,
                       lei:lei.value,
                       time:time()
                   }),
                   success:function(data){
                       console.log(data)
                   },
                   error:function(err){
                       console.log(err)
                   }
               })

            window.location.reload()
               if($("input[type=radio]").checked()){
                   $("#biao").css("color","red")
               }
           };

           //接受数据
           $.get("http://localhost:6500/allMsg",function(data){
               console.log(data);
               cha.innerHTML= baidu.template("ty",{qq:data})
           })


           //获取当前时间
           function time(){
               var data = new Date();
               var nian = data.getFullYear();
               var yue = (data.getMonth()+1);
               var ri = data.getDate();
               var shi = data.getHours();
               var fen = data.getMinutes();
               var miao = data.getSeconds();
               var pp = "";
               pp=nian+"-"+yue+"-"+ri+" "+shi+":"+fen+":"+miao;
               return pp
           }
       </script>
</html>